<template>
  <div ref="map"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 引入中国地图的JSON数据
// @ts-expect-error
import chinaJSON from "./china.json";
// 获取DOM元素
let map = ref();
let plane = [
  {
    coords: [
      [116.405285, 39.904989], // 起点
      [119.306239, 26.075302], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
  {
    coords: [
      [116.405285, 39.904989], // 起点
      [114.298572, 30.584355], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
  {
    coords: [
      [126.642464, 45.756967], // 起点
      [111.267442, 26.058824], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
  {
    coords: [
      [110.33119, 20.031971], // 起点
      [104.065735, 30.659462], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
  {
    coords: [
      [101.778916, 36.623178], // 起点
      [104.065735, 30.659462], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
  {
    coords: [
      [87.617733, 43.792818], // 起点
      [104.065735, 30.659462], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
  {
    coords: [
      [104.065735, 30.659462], // 起点
      [111.267442, 26.058824], // 终点
    ],
    // 统一的样式设置
    lineStyle: {
      color: "#00CED1",
      width: 4,
    },
  },
];
// 注册中国地图
echarts.registerMap("china", chinaJSON as any);
onMounted(() => {
  let mychart = echarts.init(map.value);
  mychart.setOption({
    // 地图组件
    geo: {
      map: "china", // 中国地图
      roam: true, // 鼠标缩放的效果
      // 地图的位置调试
      left: 150,
      top: 150,
      right: 150,
      zoom: 1.2,
      bottom: 0,
      // 地图上的文字的设置
      label: {
        show: true, // 文字显示出来
        color: "white",
        fontSize: 14,
      },
      itemStyle: {
        // 每一个多边形的样式
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#29fcff", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "blue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        opacity: 0.8,
      },
      // 地图高亮的效果
      emphasis: {
        itemStyle: {
          color: "#FFF8DC",
        },
        label: {
          fontSize: 24,
        },
      },
    },
    // 布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: "lines", // 航线的系列
        data: plane,
        // 开启动画特效
        effect: {
          show: true,
          symbol: "arrow",
          color: "#FFF0F5",
          symbolSize: 10,
        },
      },
    ],
  });
});
</script>
<style scoped lang="scss"></style>
